<template>
  <view class="zb-tab-group" :style="{ backgroundColor: color }">
    <view v-for="item in list" :key="item.id" class="item" :class="{on: tabId === item.id}" @click="chooseTabId(item)">
      <view class="name">
        <text class="txt">{{item.name}}</text>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    name: 'zb-tab-group',
    model: {
      prop: 'value',
      event: 'input'
    },
    props: {
      //类型，到不同的页面
      list: {
        type: Array,
        default: []
      },
      value: {
        type: [Number, String],
        default: 0
      },
      type: {
        type: String,
        default: 'flex-lect'
      },
      color: {
        type: String,
        default: 'transparent'
      }
    },
    data() {
      return {
        tabId: null
      };
    },
    methods: {
      chooseTabId(item) {
        if (this.tabId !== item.id) {
          this.tabId = item.id;
          this.$emit('input', item.id);
          this.$emit('change', item.id);
        }
      },
    },
    watch: {
      value: {
        immediate: true,
        handler(e) {
          this.tabId = e;
        }
      }
    }
  };
</script>

<style lang="scss" scoped>
  .zb-tab-group {
    height: 88rpx;
    @include flex;
    .item {
      position: relative;
      flex: 1;
      text-align: center;
      @include flex;

      .name {
        position: relative;
        z-index: 5;
        font-size: 30rpx;
        line-height: 1.4;
        .txt {
          position: relative;
          z-index: 8;
        }
        &::before {
          content: '';
          display: none;
          width: 100%;
          height: 16rpx;
          background: linear-gradient(0deg, #ffc466 0%, #ff6060 100%), #fafafa;
          border-radius: 8rpx;
          position: absolute;
          left: 50%;
          transform: translateX(-50%);
          z-index: 0;
          bottom: 0rpx;
        }
      }

      &.on {
        font-weight: bold;

        .name::before {
          display: block;
        }
      }
    }
  }
</style>